<template>
	<div class="image_analysis">
		<h1>图文分析</h1>
		<div class="content">
			<el-tabs v-model="activeName1">
				<el-tab-pane label="单篇图文" name="1">
					<div class="single_img">
						<div class="title">
							<img src="../../../assets/images/manage/menu/edit.png" alt="">
							<p>仅统计了图文发出后7天内的累计数据，并且微信手机客户端展示的阅读量，和此处的阅读数的计算方法略有不同，因此两者数值也可能不一样。阅读来源看一看、搜一搜自2018/02/01开始拆分统计，此前计入其他来源。</p>
						</div>
						<div class="tab_border">
							<div class="cond_date">
								<el-date-picker
									v-model="value1"
									type="daterange"
									align="left"
									unlink-panels
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									:picker-options="pickerOptions1">
								</el-date-picker>
							</div>
							<div class="table_datas">
								<el-table
									:data="tableData"
									style="width: 100%"
									:default-sort = "{prop: 'title', order: 'descending'}"
								>
									<el-table-column
										prop="title"
										label="文章标题"
										width="180">
									</el-table-column>
									<el-table-column
										prop="time"
										label="时间"
										width="180">
									</el-table-column>
									<el-table-column
										prop="ssum"
										label="送达人数"
										sortable>
									</el-table-column>
									<el-table-column
										prop="ysum"
										label="图文阅读人数"
										sortable>
									</el-table-column>
									<el-table-column
										prop="fsum"
										label="分享人数"
										sortable>
									</el-table-column>
									<el-table-column
										prop="address"
										label="操作">
										<template slot-scope="scope">
											<span>编辑</span>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="全部图文" name="2">2</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'image_analysis',
		data() {
			return {
				activeName1: '1',
				value1: '',
				pickerOptions1: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				tableData: [{
					title: '今日头条',
					time: '2016-05-04',
					ssum: 23,
					ysum: 20,
					fsum: 10
				}, {
					title: '今日头条2',
					time: '2016-05-04',
					ssum: 23,
					ysum: 20,
					fsum: 10
				}, {
					title: '今日头条3',
					time: '2016-05-04',
					ssum: 23,
					ysum: 20,
					fsum: 10
				}, {
					title: '今日头条4',
					time: '2016-05-04',
					ssum: 23,
					ysum: 20,
					fsum: 10
				}]
			}
		},
		components: {

		},
		computed: {

		},
		created() {

		},
		methods: {

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.image_analysis {
		text-align: left;
		>h1{
			font-size: 28px;
			color: #363636;
			font-weight: 500;
			padding: 38px 0 20px 72px;
		}
		.content {
			.single_img{
				.title{
					width: 90%;
					display: flex;
					justify-content: center;
					margin: 80px auto 30px auto;
					img{
						width: 18px;
						height: 18px;
						margin-right: 5px;
					}
					p{
						font-size: 15px;
						color: #222;
					}
				}
				.tab_border{
					width: 90%;
					margin: 0 auto;
					border: 1px solid #e7e7eb;
					padding: 10px 0 30px 0;
					.cond_date{
						height: 52px;
						background: #f4f5f9;
						display: flex;
						align-items: center;
						padding: 0 16px;
					}
					.table_datas{

					}
				}
			}
		}
	}
</style>